<template>
  <div class="action-btn-wp">
    <el-button v-if="action" type="primary" size="small" @click.stop.prevent="showInfo()"><slot>买断处理</slot></el-button>
    <el-button v-if="!action" type="text" size="small" @click.stop.prevent="showInfo()"><slot>买断详情</slot></el-button>

    <el-dialog
        :visible.sync="dialogVisible"
        size="tiny"
        :close-on-click-modal="!action"
        custom-class="small-body-dialog center-header-dialog buyout-dialog">

      <span slot="title">
        <span style="font-weight: bold;font-size: 16px;">{{action?'买断处理':'买断详情'}}</span>
      </span>
      <div class="buyout-info-dialog-wp">
        <span v-if="!action && info.state==='buyout'" class="mark"></span>
        <div class="block-item">
          <div class="title">{{action?'当前订单信息':'关联订单信息'}}</div>
          <div class="body">
            <ul class="item-list">
              <li>
                <div class="item">
                  <label>当前订单编号:</label>
                  <span>{{info.orderNumber}}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>商品名称:</label>
                  <span>{{info.goodsName}}</span>
                </div>
              </li>
              <li class="inline">
                <div class="item">
                  <label>新旧程度:</label>
                  <span>{{info.oldLevel}}</span>
                </div>
                <div class="item">
                  <label>商品原价:</label>
                  <span>￥{{info.price | parsePrice}}</span>
                </div>
              </li>
              <li class="inline">
                <div class="item">
                  <label>租赁期限:</label>
                  <span>{{info.leaseTerm}}天</span>
                  <span>(共{{info.leaseStage}}期)</span>
                </div>
                <div class="item">
                  <label>租金:</label>
                  <span>{{info.dailyRent | parsePrice }}元/天</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>意外保险:</label>
                  <span>￥{{info.accidentInsurance | parsePrice }}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>总租金:</label>
                  <span>￥{{info.cost | parsePrice }}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>订单总额:</label>
                  <span>￥{{info.totalAmount | parsePrice }}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>已付租金:</label>
                  <span>￥{{info.paidAmount | parsePrice }}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>下单用户:</label>
                  <span>{{info.userName || ''}}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>联系电话:</label>
                  <span>{{info.userName || ''}}</span>
                </div>
              </li>
              <li>
                <div class="item">
                  <label>用户留言:</label>
                  <span>{{info.remark || ''}}</span>
                </div>
              </li>
              <li class="total">
                <div class="item">订单总额:</div>
                <div class="item">
                  {{info.dailyRent | parsePrice}}元/天
                  *
                  {{info.leaseTerm}}天
                  <span v-if="info.accidentInsurance">
                  + ￥{{info.accidentInsurance | parsePrice}}
                  </span>
                  =
                  <span style="color: red;">￥{{info.totalAmount | parsePrice }}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <template v-if="!action">
          <div class="block-item">
            <div class="title">买断订单信息</div>
            <div class="body">
              <ul class="item-list">
                <li>
                  <div class="item">
                    <label>商品原价:</label>
                    <span>￥{{info.price | parsePrice}}</span>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <label>已付租金:</label>
                    <span>￥{{info.paidAmount | parsePrice}}</span>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <label>买断总额:</label>
                    <span>￥{{info.buyoutMoney | parsePrice }}</span>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <label>买断尾数:</label>
                    <!--<span>￥{{info.buyoutTotalAmount | parsePrice }}</span>-->
                  </div>
                </li>
                <!--<li class="total">
                  <div class="item">订单总额:</div>
                  &lt;!&ndash;<div class="item">
                    {{info.buyoutDailyRent | parsePrice}}元/天
                    *
                    {{info.buyoutLeaseTerm}}天
                    <span v-if="info.buyoutAccidentInsurance">
                    + ￥{{info.buyoutAccidentInsurance | parsePrice}}
                    </span>
                    =
                    <span style="color: red;">￥{{info.buyoutTotalAmount | parsePrice }}</span>
                  </div>&ndash;&gt;
                </li>-->
              </ul>
            </div>
          </div>
          <footer class="dialog-footer">
            <ul class="item-list">
              <li>
                <div>
                  <label>买断处理结果:</label>
                  <span>{{info.checkStateStr || ''}}</span>
                </div>
              </li>
              <li>
                <div>
                  <label>操作人:</label>
                  <span>{{info.checkAuthor || ''}}</span>
                </div>
              </li>
              <li>
                <div>
                  <label>操作时间:</label>
                  <span>{{info.checkTime | parseTime}}</span>
                </div>
              </li>
            </ul>
          </footer>
        </template>

        <template v-if="action">
          <div class="block-item">
            <div class="title">买断信息</div>
            <el-form ref="buyoutForm" label-width="6em" class="buyout-form">
              <el-form-item label="商品原价:">
                <span>￥{{info.price | parsePrice}}</span>
              </el-form-item>
              <el-form-item label="已付租金:">
                <span>￥{{info.paidAmount | parsePrice}}</span>
              </el-form-item>
              <el-form-item label="买断总额:">
                <input v-model="buyoutAmount" placeholder="" class="el-input__inner" style="width: 120px;" @keyup="handleBuyoutAmount" />
                <span>元</span>
              </el-form-item>
              <el-form-item label="买断尾数:">
                <span>￥{{buyoutLeftAmount}}</span>
              </el-form-item>
            </el-form>
          </div>

          <footer class="dialog-footer" style="text-align: center;">
            <el-button @click="handleBuyout(false)" :loading="sending0" :disabled="disabled">不同意买断</el-button>
            <el-button type="primary" @click="handleBuyout(true)" :loading="sending1" :disabled="disabled">同意买断</el-button>
          </footer>
        </template>


      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getOrderBuyoutDetail,buyoutCheck} from '@/api/order';
  import {showMessage} from '@/utils/message';

  export default {
    name: 'actionBuyoutInfo', //买断详情
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'id'
      },
      action:{ //显示详情还是处理买断，默认显示详情
        type:Boolean,
        default:true,
      }
    },
    data()
    {
      return {
        dialogVisible:false,
        sending0:false, //不同意买断发送
        sending1:false, //同意买断发送
        disabled:false, //按钮禁用
        info:
          {
            "id": "", //买断申请ID
            "orderNumber": "", //当前订单编号
            "orderStateStr":"", //订单状态
            "goodsName": "", //商品名称
            "oldLevel": "", //商品新旧程度
            "price": 0, //商品原价
            "leaseTerm": 0, //租赁天数
            "leaseStage": 0, //租赁期数
            "dailyRent": 0, //每天租金
            "accidentInsurance": 0, //意外保险
            "cost": 0, //订单总租金
            "totalAmount": 0, //订单总金额
            "userName": "", //下单用户
            "paidAmount":0, //已付租金
            "buyoutMoney":0, //买断金额
            "remark":"", //用户留言
            "checkStateStr": "", //审核状态描述
            "checkAuthor": "", //审核人员
            "checkTime": 0, //审核时间
            "state": "", //审核状态（buyout 同意买断  not_buyout 不同意买断）
          },
          buyoutAmount:0, //买断总额
          buyoutLeftAmount:0, //买断尾款
      }
    },
    methods: {
      showInfo() //显示买断详情
      {
        getOrderBuyoutDetail({id:this.scope.row.id}).then(resp=>{
          let data = resp.data;
          this.info = data;

          this.buyoutAmount = parseFloat((data.buyoutMoney || 0)/100);
          this.buyoutLeftAmount = (parseFloat(data.price || 0) - parseFloat(data.paidAmount || 0)).toFixed(2);

          this.dialogVisible = true;

        }).catch(err=>{

        });

      },
      setValidNum(val, prop) //监视输入框的值是否正确
      {
        if(isNaN(val.toString()) || !/^\d+(\.\d{1,2})?$/.test(parseFloat(val)))
        {
          this.$data[prop] = val.toString().substring(0,val.length-1);
        }

      },
      handleBuyoutAmount() //监听修改总额事件,买断尾款=商品原价-已付租金
      {
        this.setValidNum(this.buyoutAmount,'buyoutAmount');
        this.buyoutLeftAmount = (parseFloat(this.info.price || 0) - parseFloat(info.paidAmount || 0)).toFixed(2);
      },
      handleBuyout(buyout)
      {
        if(!this.buyoutAmount || parseFloat(this.buyoutAmount)< 0)
        {
          this.$message({
            message: '买断总额不合理，请重新输入',
            type: 'error',
            duration: 3000
          });

          return;
        }

        //验证买断尾款不能为负数
        if(!this.buyoutLeftAmount || parseFloat(this.buyoutLeftAmount)< 0)
        {
          this.$message({
            message: '买断尾款不合理，请检查',
            type: 'error',
            duration: 3000
          });

          return;
        }


        this.$confirm('是否继续?', buyout?'同意买断':'不同意买断', {
          confirmButtonText: buyout?'同意买断':'不同意买断',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          //不管是否同意，只要在提交数据，就返回
          if(this.disabled || this.sending0 || this.sending1)
          {
            return;
          }

          this.disabled = true;

          let data = {
            id:this.scope.row.id,
            buyoutMoney:(this.buyoutAmount || 0) * 100,
          };

          if(buyout) //同意买断
          {
            this.sending1 = true;
            data.checkState = 'buyout';
            data.checkRemark = '同意买断';

          }
          else{ //不同意买断
            this.sending0 = true;
            data.checkState = 'not_buyout';
            data.checkRemark = '不同意买断';
          }

          buyoutCheck(data).then(resp=>{

            showMessage({title:'买断处理成功',message:'',type:'success'});

            this.sending0 = false;
            this.sending1 = false;
            this.disabled = false;
            this.dialogVisible = false;

            let rows = this.scope.rows;
            let index = this.scope.index;
            rows.splice(index,1);

            this.$emit('success');

          }).catch(err=>{
            this.sending0 = false;
            this.sending1 = false;
            this.disabled = false;
          });

        }).catch(() => {

        });

      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../styles/mixin.scss";

  .buyout-info-dialog-wp
  {
    .block-item
    {
      padding: 28px 22px;
      border: 1px solid #C0CCDA;
      border-radius: 4px;


      + .block-item
      {
        margin-top: 15px;
      }

      > .title
      {
        text-align: center;
        color: #333;
        margin-bottom: 10px;
      }

      > .body
      {

      }


      > .footer
      {
        margin-top: 20px;
      }

    }

    .item-list
    {
      padding: 0;
      margin: 0;
      list-style: none;
      line-height: 1.6;
      font-size: 13px;

      > li
      {
        display: block;
        @include clearfix();

        label
        {
          padding-right: 5px;
        }

        &.inline
        {
          .item
          {
            float: left;
            width: 50%;
          }
        }

        &.total
        {
          color: #333;
          margin-top: 15px;
        }

      }

    }

    .dialog-footer
    {
      padding: 10px;
      margin-top: 10px;
    }

    .buyout-form
    {
      .el-form-item
      {
        margin-bottom: 5px;
      }
    }
  }
</style>
<style lang="scss">
  .buyout-dialog
  {
    position: relative;

    .mark
    {
      position: absolute;
      right: 6px;
      top: 15px;
      width: 174px;
      height: 95px;
      background: url("../../../assets/buyout/buyout_agree.png") 0 0 no-repeat;
      z-index: 0;
    }

    .el-dialog__body
    {
      padding-bottom: 15px;
    }
    .el-dialog__headerbtn
    {
      position: relative;
      z-index: 10;
    }
  }
</style>